<template>
  <div id="footprint" class="mt36" style="margin-top:24px;margin-bottom:0px">
    <div class="footprint-hd mb36" style="margin-bottom: 0px;">
      <h2 class="title fl" >{{title}}</h2>
    </div>
    <div class="footmark-bd">
      <!-- 足迹为空 -->
      <div v-if="footmark.length<=0" class="footprint-none">{{none}}</div>
      <!-- <div class="footmark-section" v-infinite-scroll="load"> -->
        <!-- <div class="footmark-title">
          <el-divider content-position="left">*年*月*日</el-divider>
        </div> -->
        <div v-if="footmark.length>0" class="footmark-cont">
          <div class="footmark-list">
            <div class="footmark-item"  v-for="(value,index) in footmark" :key="index" @click="$router.push({name:'Detail',query:{id:value.product_id}})">
              <div class="pic">
                <img :src="value.imgs.split(',')[0]" alt />
              </div>
              <div class="title">
                <h6>{{value.product_name|format}}</h6>
              </div>
              <div class="price">￥{{value.shop_price}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "我的足迹",
      none: "暂无任何浏览记录",
      footmark: [
      ]
    };
  },
  mounted(){
    this.init()
  },
  filters: {
    format(val) {
      return val.substring(0,16);
    }

  },
  methods:{
    init(){
      this.axios.post("/user/footprint").then((resp)=>{
        if(resp.code ==0){
          this.footmark = resp.data
        }
      })
    }
  }
};
</script>

<style scoped>
#footprint {
  width: 1080px;
  min-height: 600px;
  margin-left: auto;
  margin-right: auto;
  /* background-color: antiquewhite; */
}

/* 标题 */
.footprint-hd {
  height: 18px;
  /* background-color: aqua; */
}
.footprint-hd .title {
  font-size: 18px;
  line-height: 1;
}

/* 足迹 */
.footprint-none {
  padding-top: 135px;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.footmark-section {
  position: relative;
  padding-top: 40px;
  border-top: 1px dotted #ddd;
}
.footmark-title {
  position: absolute;
  left: 0;
  top: -13px;
  height: 25px;
  padding-left: 28px;
  padding-right: 20px;
  background-color: #fff;
}

.footmark-cont {
  overflow: hidden;
  padding: 0 36px;
  /* background-color: deepskyblue; */
}
.footmark-list {
  display: table;
  zoom: 1;
  /* margin-left: -25px;
  margin-top: -28px; */
  /* background-color: deeppink; */
}
.footmark-item {
  position: relative;
  float: left;
  width: 230px;
  /* margin-left: 25px;
  margin-top: 28px; */
  margin: 28px 10px 0;
  border: 1px solid #fff;
}
.footmark-item .pic {
  width: 230px;
  height: 230px;
}
.pic img {
  width: 100%;
}
.footmark-item .title {
  margin-top: 10px;
  font-size: 14px;
  line-height: 15px;
}
.title h6 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.footmark-item .price {
  height: 18px;
  margin-top: 10px;
  font-size: 18px;
  line-height: 18px;
  color: #29a3d6;
}
.footmark-item:hover {
  cursor: pointer;
  border-radius: 1%;
  border: 1px solid #d1d6d6;
}
</style>
